<template>
  <div>
    <h1>操作日志</h1>
    <el-row :gutter="20">
      <el-form :inline="true" class="demo-form-inline">
        <el-row>
          <el-col :span="8">
            <div class="grid-content bg-purple"></div>
            <el-form-item   label="操作人员：">
              <el-input v-model="operName" placeholder="请输入操作人员账号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item  label="操作类型：">
              <el-select v-model="businessType" clearable placeholder="请选择">
                <el-option
                    v-for="item in options1"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="操作状态：">
              <el-select v-model="statusType" clearable placeholder="请选择">
                <el-option
                    v-for="item in options2"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="操作日期：">
          <el-date-picker
              v-model="loginFormTime"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">查询</el-button>
        </el-form-item>
      </el-form>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark"></div>
        <el-table
            :data="tableData"
            style="width: 100%">
          <el-table-column
              prop="operName"
              label="操作人员">
          </el-table-column>
          <el-table-column
              prop="businessType"
              label="操作类型">
          </el-table-column>
          <el-table-column
              prop="requestMethod"
              label="请求方式">
          </el-table-column>
          <el-table-column
              prop="operIp"
              label="操作地址">
          </el-table-column>
          <el-table-column
              prop="status"
              label="操作状态">
          </el-table-column>
          <el-table-column
              prop="operTime"
              label="操作日期">
          </el-table-column>
          <el-table-column
              label="操作"
          >
            <template v-slot="scope">
              <el-button type="text" @click=detail(scope.row.id)>详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="24">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page=this.currentPage
            :page-sizes="[10, 20, 50, 100]"
            :page-size=this.pageSize
            layout="total, sizes, prev, pager, next, jumper"
            :total=this.total>
        </el-pagination>
      </el-col>
    </el-row>
    <el-dialog title="详细信息" :visible.sync="dialogTableVisible">
      <el-descriptions :model="tableDataDetailed">
        <el-descriptions-item label="操作人员" >{{tableDataDetailed.operName}}</el-descriptions-item>
        <el-descriptions-item label="操作类型">{{tableDataDetailed.businessType}}</el-descriptions-item>
        <el-descriptions-item label="请求方式">{{tableDataDetailed.requestMethod}}</el-descriptions-item>
        <el-descriptions-item label="操作地址">{{tableDataDetailed.operIp}}</el-descriptions-item>
        <el-descriptions-item label="操作状态">{{tableDataDetailed.status}}</el-descriptions-item>
        <el-descriptions-item label="操作人员部门">{{tableDataDetailed.deptName}}</el-descriptions-item>
        <el-descriptions-item label="请求URL">{{tableDataDetailed.operUrl}}</el-descriptions-item>
        <el-descriptions-item label="请求接口">{{tableDataDetailed.title}}</el-descriptions-item>
        <el-descriptions-item label="操作日期">{{tableDataDetailed.operTime}}</el-descriptions-item>
        <el-descriptions-item label="请求参数">{{tableDataDetailed.operParam}}</el-descriptions-item>
        <el-descriptions-item label="返回参数">{{tableDataDetailed.jsonResult}}</el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "OperLogPage",
  data() {
    return {
      //操作时间
      loginFormTime:[],
      //操作类型
      options1: [{
        value: 1,
        label: '新增'
      }, {
        value: 2,
        label: '修改'
      }, {
        value: 3,
        label: '删除'
      }],
      businessType:'',
      //操作状态
      options2: [{
        value: 0,
        label: '成功'
      }, {
        value: 1,
        label: '失败'
      }],
      statusType:"",
      //显示数据
      tableData:[],
      //操作人员
      operName:"",
      //当前页数
      currentPage: 1,
      //每页多少条
      pageSize: 10,
      //总条数
      total:0,
      //控制弹窗
      dialogTableVisible:false,
      //详情信息
      tableDataDetailed:[]
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    async detail(id){
      this.dialogTableVisible = true
      let data = await request("operLog/"+id);
      data.title=data.title+'.'+data.method+"()"
      let newBusinessType=data.businessType;
      let newstatus=data.status

      if (newBusinessType===1){
        data.businessType="添加"
      }else if (newBusinessType===2){
        data.businessType="修改"
      }else if (newBusinessType===3){
        data.businessType="删除"
      }else {
        data.businessType="其他"
      }

      if (newstatus===0){
        data.status="成功"
      }else if (newstatus===1){
        data.status="失败"
      }else {
        data.status="其他"
      }

      console.info(newBusinessType)
      this.tableDataDetailed=data
    },


    async loadData() {

      if(this.loginFormTime==null){
        this.loginFormTime=[]
      }
      let startTime
      let endTime
      if(this.loginFormTime[0]!=undefined){
        startTime=this.loginFormTime[0];
        endTime=this.loginFormTime[1];
      }else {
        startTime=''
        endTime=''
      }

      let data = await request("operLog?operName="+this.operName+"&businessType="+this.businessType+"&status="+this.statusType+"&startTime="+startTime+"&endTime="+endTime+"&page=" + this.currentPage + "&size=" + this.pageSize);
      this.tableData = data.list
      this.total = data.total
      let number = 0
      this.tableData.forEach(()=>{
        if (this.tableData[number].businessType===1){
          this.tableData[number].businessType="新增"
        }else if (this.tableData[number].businessType===2){
          this.tableData[number].businessType="修改"
        }else if (this.tableData[number].businessType===3){
          this.tableData[number].businessType="删除"
        }else {
          this.tableData[number].businessType="其他"
        }
        if (this.tableData[number].status===0){
          this.tableData[number].status="成功"
        }else if (this.tableData[number].status===1){
          this.tableData[number].status="失败"
        }else {
          this.tableData[number].status="其他"
        }
        number++
      })

    },

    //查询的方法
    search() {
    this.currentPage=1
    this.loadData()
    },
    //每页多少条
    handleSizeChange(val) {
      this.pageSize=val;
      this.currentPage=1
      this.loadData()
    },
    //当前页数
    handleCurrentChange(val) {
      this.currentPage=val
      this.loadData()
    },
  }
}
</script>

<style scoped>

</style>